<template>
  <section style="margin: 0 auto">
    <template>
      <el-form :inline="true" label-width="80px" style="width: 1280px">
        <el-form-item>
          <el-input placeholder="输入角色名称" style="min-width: 240px;" v-model="nickName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">新增管理员</el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-table border :data="users" style="width: 871px">
      <el-table-column type="selection" width="110">
      </el-table-column>
      <el-table-column prop="nickname" label="管理员名称" width="230">
      </el-table-column>
      <el-table-column prop="remark" label="数据范围" width="330">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template  slot-scope="scope">
          <el-button type="success" @click='compile(scope.$index,scope.row)' size="small">修改</el-button>
          <el-button type="success" @click='compile(scope.$index,scope.row)' size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--编辑-->
    <el-dialog  :visible.sync="editFormVisible" style="margin:0">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="116px">
        <el-form-item label="管理员名称" prop="name"label-width="100px">
          <el-input v-model="ruleForm.name" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="是否是超级管理员">
          <el-select>
            <el-option label="DAPP运营指标" value="shanghai"></el-option>
            <el-option label="糖果分布指标" value="beijing"></el-option>
            <el-option label="单用户查询" value="shanghai"></el-option>
            <el-option label="上传数据管理" value="beijing"></el-option>
            <el-option label="系统管理" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否是超级管理员" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--创建-->
    <el-dialog  :visible.sync="editFormVisible" style="margin:0">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="116px">
        <el-form-item label="管理员名称" prop="name"label-width="100px">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="是否是超级管理员">
          <el-select>
            <el-option label="DAPP运营指标" value="shanghai"></el-option>
            <el-option label="糖果分布指标" value="beijing"></el-option>
            <el-option label="单用户查询" value="shanghai"></el-option>
            <el-option label="上传数据管理" value="beijing"></el-option>
            <el-option label="系统管理" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否是超级管理员" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="block">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="count" >
      </el-pagination>
    </div>
  </section>
</template>
<script>
  import axios from "axios";
  export default {
    data() {
      return {
        nickName:'',
        count: 0,
        page: 0,
        users: [],
        editFormVisible: false,
        form:'',
        remark: '',
        gameId:'',
        fileId: 0,
        user: 0,
        ruleForm: {
          resource: '',
          label: ''
        }
      }
    },
    methods:{
      query(){
        this.getTabData();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getTabData(val);
      },
      gameType: function(row, column) {
        return row.gameId == 1 ? '损坏共享单车拍照收集' :
                row.gameId == 2 ? '方言语音训练数据收集' :
                row.gameId == 3 ? '推理游戏意见调查':
                row.gameId == 4 ? '发票、小票拍照收集':
                row.gameId == 5 ? '城市背景声数据收集':
                row.gameId == 6 ? '路况情况拍照征集':
                row.gameId == 7 ? 'FIFA世界杯竞赛':'暂无'
      },
      getTabData: function(index) {
      var _this = this;
      axios.get(
        '/api/uploadData',{
          method:'GET',
          headers:{
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          params: {
            page: index,
            nickName : _this.nickName
          }
        })
        .then(res => res.data)
        .then(({rows, count}) => {
          this.users = rows;
          this.count = count
        })
        .catch(function(error) {
          console.log(error);
        });

    },
      compile:function (index,row) {
        var _this = this;
        _this.fileId = row.fileId;
        _this.user =row.userId;
        _this.remark = row.remark;
        _this.gameId = row.gameId == 1 ? '损坏共享单车拍照收集' :
                        row.gameId == 2 ? '方言语音训练数据收集' :
                        row.gameId == 3 ? '推理游戏意见调查':
                        row.gameId == 4 ? '发票、小票拍照收集':
                        row.gameId == 5 ? '城市背景声数据收集':
                        row.gameId == 6 ? '路况情况拍照征集':
                        row.gameId == 7 ? 'FIFA世界杯竞赛':'暂无';
        console.log(  _this.gameId)
        this.editFormVisible = true;

      },
      submitForm:function(ruleForm){
        this.ruleForm.resource = null;
        this.ruleForm.label = null;
        this.editFormVisible = false;
      },
      resetForm:function(ruleForm){
        this.ruleForm.resource = null;
        this.ruleForm.label = null;
      }
  },
  mounted(){
    this.getTabData()
  }
  }
</script>
<style>
  p{
    text-align: left;
  }
  section{
    padding-left:77px;
  }
  .el-form--inline .el-form-item__label{
    margin-top: -16px;
  }
  form{
    width: 575px;
  }
  .el-form-item__label {
     font-size: 12px;
     line-height: 6;
   }
  .neirong{
    width: 250px;
    height: 150px;
    border: 1px solid black;
  }
</style>
